import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dayjs from 'dayjs';
import { resolve } from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
import zipPack from 'vite-plugin-zip-pack'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: false, //注意这里要设置为true，否则无效
      filename: "release/stats.html", //分析图生成的文件名
      gzipSize: true, // 收集 gzip 大小并将其显示
      brotliSize: true, // 收集 brotli 大小并将其显示
      template: 'treemap', // 可选：'treemap' | 'sunburst' | 'flamegraph' | 'network' | 'raw-data' | 'list'
    }),
    importToCDN({
      modules: [
        'vue',
        'axios',
        {
          name: 'lodash-es', // node_modules 里的包名
          var: '_', // 浏览器全局变量（lodash UMD 暴露）
          path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js' // CDN 上的文件地址
        },
        {
          name: 'echarts',
          var: 'echarts',
          path: 'https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js'
        },
        // {
        //   name: 'dayjs',
        //   var: 'dayjs',
        //   path: [
        //     'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js',
        //     'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js',
        //     'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/zh-cn.js'
        //   ]
        // },
        {
          name: 'dayjs',
          var: 'dayjs',
          path: 'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js'
        },
        {
          name: 'dayjs/plugin/relativeTime',
          var: 'dayjs',
          path: 'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js'
        },
        {
          name: 'dayjs/locale/zh-cn',
          var: 'dayjs',
          path: 'https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/zh-cn.js'
        },
      ]
    }),
    zipPack({
      outDir: 'release',          // zip 输出目录（相对于项目根, 点表示当前目录）
      // outFileName: 'dist.zip',    // zip 文件名
      outFileName: `dist-${dayjs().format('YYYYMMDD-HHmmss')}.zip`,
      sourceDir: 'dist',          // 要压缩的目录
      pathPrefix: '',             // 压缩包内部顶层文件夹名，空字符串表示根目录
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  build: {
    cssMinify: true, // 开启 CSS 压缩
    minify: 'terser', // 使用 Terser 进行JS压缩
    terserOptions: {
      compress: {
        drop_console: false, // 移除 console.* 语句
        drop_debugger: true, // 移除 debugger 语句
        pure_funcs: ['console.log', 'console.warn'], // 移除指定函数调用
        passes: 3, // 进行三次压缩
      },
      mangle: {
        toplevel: true, // 开启顶级作用域变量名混淆
        safari10: false, // 如无兼容旧 Safari 可关闭
      },
      format: {
        comments: false, // 移除注释
        ascii_only: true, // 防止中文/emoji 造成编码问题（可选）
      },
    },
    // 1. 调大警告阈值（可选）
    chunkSizeWarningLimit: 500,
    // 2. 手动拆包
    rollupOptions: {
      // external: ['dayjs', 'dayjs/plugin/relativeTime', 'dayjs/locale/zh-cn'],
      output: {
        manualChunks(id) {
          // console.log(id);
          // 三方依赖
          if (id.includes('node_modules')) {
            // return id.split('node_modules/')[1].split('/')[0].toString();
            // 以包名做 chunk 名
            const pkg = id.split('node_modules/')[1].split('/')[0]
            return `vendor-${pkg}`;
          }
          // 页面组件
          if (id.includes('src/views')) {
            // 以页面名做 chunk 名
            const page = id.split('src/views/')[1].split('/')[0]
            return `page-${page}`;
          }
          // 公共组件
          if (id.includes('src/components')) {
            // 以组件名做 chunk 名
            return `components`;
          }
          // 工具函数
          if (id.includes('src/utils')) {
            // 以文件名做 chunk 名
            return `utils`;
          }
          // 样式文件
          if (id.includes('.css') || id.includes('.scss')) {
            return `styles`;
          }
        },
        // 使用文件名哈希
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
      }
    },
  },
});